<!DOCTYPE html>
<html lang="${lang}">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=1366">
  <title>${login} | iconLake - You Create, You Own!</title>
  <meta name="description" content="iconLake - You Create, You Own! Creation lifecycle management tool in web3.0">
  <link rel="icon" href="/imgs/favicon.ico" />
  <link rel="stylesheet" href="https://cdn.iconlake.com/src/62baa706165a501ea7a68e00/e1682ffd4f562394187c9ea42b4bbe81/iconlake.css">
  <link rel="stylesheet" href="/common/index.css">
  <link rel="stylesheet" href="/login/index.css">
</head>

<body>
  <div class="app flex center">
    <img class="login-bg-c-t" src="/imgs/login-bg-circle-t.png" alt="iconLake">
    <img class="login-bg-c-b" src="/imgs/login-bg-circle-b.png" alt="iconLake">
    <div class="login">
      <a class="logo" href="/">
        <img src="/imgs/logo.svg" height="50" alt="iconLake">
      </a>
      <div class="content flex">
        <div class="illus">
          <img src="/imgs/illus-1.png" alt="iconLake">
        </div>
        <div class="auth">
          <h1>${login}</h1>
          <div class="t-center security">
            <img src="/imgs/login-security.png" alt="iconLake security">
          </div>
          <div id="loading" class="flex center">
            <span class="loading iconfont icon-loading c-main" />
          </div>
          <div id="items" class="items hide">
            <div class="item keplr flex">
              <img src="/imgs/keplr.svg" alt="iconLake login with keplr">
              <span class="label-uninstall">${gotoInstall}Keplr Extension</span>
            </div>
            <div class="item webAuthn flex">
              <img src="/imgs/fido-passkey.svg" alt="iconLake login with passkey">
              <span>${webAuthn}</span>
              <span class="create flex center">${newWebAuthn}</span>
            </div>
            <div class="item google flex">
              <img class="small" src="/imgs/google.webp" alt="iconLake login with google">
            </div>
            <div class="item gitee flex">
              <img class="small" src="/imgs/gitee-logo.svg" alt="iconLake login with gitee">
            </div>
            <div class="item github flex">
              <img class="small" src="/imgs/github-logo.svg" alt="iconLake login with github">
            </div>
            <div class="item mail flex">
              <img class="small" src="/imgs/mail.svg" alt="iconLake login with mail">
            </div>
            <div class="item code flex">
              <span>Code</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prompt flex center">
    <input type="text">
  </div>
  <div class="prompt mail flex center">
    <input type="email" placeholder="${email}">
    <input type="password" placeholder="${password}">
    <div class="btns flex">
      <button
        class="btn secondary"
        id="mail-send"
        data-done-text="${sendMailDone}"
        data-loading-text="${sending}"
        data-default-text="${sendPasswordToEmail}"
        data-fail-text="${fail}"
        data-sentIn24Hours-text="${sentIn24Hours}"
      >${sendPasswordToEmail}</button>
      <button
        class="btn"
        id="mail-login"
        data-fail-text="${fail}"
        data-loading-text="${loading}"
        data-default-text="${login}"
      >${login}</button>
    </div>
  </div>
  <script>
    var locale = "${locale}";
  </script>
  <script src="/common/index.js"></script>
  <script src="/login/index.js"></script>
</body>

</html>
